{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
    <!-- CPU Load -->
    <div class="col-md-6">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">CPU Load</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="load" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- 磁盘统计 -->
    <div class="col-md-6">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">磁盘统计</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="disk" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- 进程统计 -->
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">进程统计</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="tasks" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- CPU使用率 -->
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">CPU使用率</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="cpu" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- 内存使用率 -->
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">内存使用率</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="mem" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- swap使用率 -->
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">SWAP使用率</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="swap" style="width: 100%;height: 300px"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <div class="col-xs-12">
        <!-- /.box -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <table id="process" class="table table-bordered table-hover cell-border">

                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

{% endblock %}

{% block js %}
    <!-- ChartJS -->
    <script src="{% static 'js/echars.min.js' %}"></script>
    <!-- DataTables -->
    <script src="{% static 'AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>

    <script>
        $(function () {
            $.ajax({
                url: '{% url "get_top_data" pk %}',
                type: 'GET',
                success: function (res) {
                    if (res.code === 200) {
                        initGraph(res.data);
                        initTable(res.data)
                    } else {
                        alert(res.msg)
                    }
                },
            })
        });


        function initGraph(data) {
            let load = echarts.init(document.getElementById('load'));
            let disk = echarts.init(document.getElementById('disk'));
            let tasks = echarts.init(document.getElementById('tasks'));
            let cpu = echarts.init(document.getElementById('cpu'));
            let mem = echarts.init(document.getElementById('mem'));
            let swap = echarts.init(document.getElementById('swap'));
            let option_load = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}"
                },
                xAxis: {
                    type: 'category',
                    data: ['1分钟', '5分钟', '15分钟']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data.load,
                    type: 'bar',
                }]
            };
            let option_disk = {
                legend: {},
                tooltip: {
                    trigger: 'item',
                    formatter: function (params, ticket, callback) {
                        return params.value[params.encode.y[0]] + 'G';
                    }
                },
                dataset: {
                    source: data.disk
                },
                xAxis: {type: 'category'},
                yAxis: {
                    type: 'value',
                    axisLabel: {formatter: '{value} G'}
                },
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };
            let option_tasks = {
                title: {
                    subtext: '总共' + data.tasks.total + '个',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}个 ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(data.tasks)
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: formatData(data.tasks, 'tasks'),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            let option_cpu = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}%"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(data.cpu)
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: formatData(data.cpu, 'cpu'),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            let option_mem = {
                title: {
                    subtext: '总共' + (parseInt(data.mem.total) / (1024 * 1024)).toFixed(2) + 'G',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}G ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(data.mem)
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: formatData(data.mem, 'mem'),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            let option_swap = {
                title: {
                    subtext: '总共' + (parseInt(data.swap.total) / (1024 * 1024)).toFixed(2) + 'G',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}G ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(data.swap)
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: formatData(data.swap, 'swap'),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            load.setOption(option_load);
            disk.setOption(option_disk);
            tasks.setOption(option_tasks);
            cpu.setOption(option_cpu);
            mem.setOption(option_mem);
            swap.setOption(option_swap);
        }

        function initTable(res) {
            let columnList = [];

            for (let item of res.heads) {
                columnList.push({'title': item})
            }
            $('#process').DataTable({
                'paging': true,
                "order": [[9, "desc"]],
                'info': true,
                'autoWidth': false,
                'columns': columnList,
                'data': res.body,
                'retrieve': true,
                'scrollX': true,
            });
        }

        function formatData(data, type) {
            let seriesData = [];
            for (let key of Object.keys(data)) {
                if (key !== 'total') {
                    seriesData.push({
                        name: key,
                        value: type === 'mem' || type === 'swap' ? (parseInt(data[key]) / (1024 * 1024)).toFixed(2) : data[key]
                    });
                }
            }
            return seriesData
        }

    </script>
{% endblock %}